<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="common-tit">
				<h2>课程详情</h2>
				<span>课程系统 > 课程详情</span>
				<div class="cours-gbtn">
					<a href="#">编辑</a>
					<a href="#">开课</a>
					<a href="">学员预约</a>
				</div>
			</div>
			<div class="course-box">
				<h3>
					<span>基本信息</span>
				</h3>
				<ul class="cou-bas clearfix">
					<li>
						<span>消费类型:</span>
						<em>单次售卖课程</em>
					</li>
					<li>
						<span>课程类型:</span>
						<em>常规课</em>
					</li>
					<li>
						<span>课程名称:</span>
						<em>不能不能超过十个字</em>
					</li>
					<li>
						<span>导师名称:</span>
						<em>张幻想</em>
					</li>
					<li>
						<span>教室:</span>
						<em>A34</em>
					</li>
					<li>
						<span>舞种:</span>
						<em>jazz hiphop</em>
					</li>
					<li>
						<span>授课对象:</span>
						<em>幼儿</em>
					</li>
					<li>
						<span>上课时长:</span>
						<em>2小时</em>
					</li>
					<li>
						<span>上课人数:</span>
						<em>-</em>
					</li>
				</ul>
				<h3>
					<span>课程信息</span>
				</h3>
				<div class="course-b clearfix">
					<div class="class-itit">
						消费方式:
					</div>
					<div class="class-fcon">
						<div>
							<span>充值:</span>
							<em>200元/课时</em>			
						</div>
						<div>
							<span>次卡:</span>
							<em>2次/课时</em>	
						</div>
						<div>
							<em>直接售卖</em>
						</div>	
						<div>
							<em>月卡</em>	
						</div>
						<div>
							<em>年卡</em>	
						</div>	
					</div>
				</div>
				<div class="course-b clearfix">
					<div class="class-itit">
						预约信息:
					</div>
					<div class="class-fcon">
						<div>
							<em>需要预约</em>			
						</div>
					</div>
				</div>
				<div class="course-b clearfix">
					<div class="class-itit">
						课程时间:
					</div>
					<div class="class-fcon">
						<div>
							<em>11月10日 - 12月10日</em>			
						</div>
						<div>
							<storng>星期一</storng>
							<em>14:30</em>	
						</div>
						<div>
							<storng>星期一</storng>
							<em>14:30</em>	
						</div>
					</div>
				</div>
			</div>
			<div class="course-box">
				<h3>
					<i>记录信息</i>
					<div class="date-lbox">
						<div class="date-box1">
							<input type="text" class="date-list1" readOnly="true" placeholder="起始时间">
						</div>
						<b> - </b>
						<div class="date-box2">
							<input type="text" class="date-list2" readOnly="true" placeholder="结束时间">
						</div>
					</div>
				</h3>
				<div class="atten-co">
					<div class="atten-box">
						<div class="atten-sel">导师签到记录</div>
						<div>学员签到记录</div>
						<div>学员预约记录</div>
					</div>
				</div>
				<div class="curli-box">
					<div class="curlist-con sel-curl">
						<div class="scrollbox">
							<table>
								<thead>
									<tr>
										<th class="cours-t">操作时间</th>
										<th class="cours-pos">导师</th>
										<th class="cours-ro">教师</th>
										<th class="cours-m">操作人</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>A23</td>
										<td>前台-张小姐</td>
									</tr>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>A23</td>
										<td>前台-张小姐</td>
									</tr>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>A23</td>
										<td>前台-张小姐</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="curlist-con">
						<div class="scrollbox">
							<table>
								<thead>
									<tr>
										<th class="cours-t">签到时间</th>
										<th class="cours-stu">学员名</th>
										<th class="cours-m">操作人</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>前台-张小姐</td>
									</tr>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>前台-张小姐</td>
									</tr>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>前台-张小姐</td>
									</tr>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>前台-张小姐</td>
									</tr>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>前台-张小姐</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="curlist-con">
						<div class="scrollbox">
							<table>
								<thead>
									<tr>
										<th class="cou-t">操作时间</th>
										<th class="cou-stu">学员名</th>
										<th class="cou-cl">教室</th>
										<th class="cou-t">操作时间</th>
										<th class="cou-m">操作人</th>
										<th class="cou-ope">操作</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>A23</td>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>前台-张小姐</td>
										<th class="cou-ope">
											<span>取消</span>
										</td>
									</tr>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>A23</td>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>前台-张小姐</td>
										<th class="cou-ope">
											<span>取消</span>
										</td>
									</tr>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>A23</td>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>前台-张小姐</td>
										<th class="cou-ope">
											<span>取消</span>
										</td>
									</tr>
									<tr>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>张幻想</td>
										<td>A23</td>
										<td>
											<span>20116-02-18</span>
											<em>14：30</em>
										</td>
										<td>前台-张小姐</td>
										<th class="cou-ope">
											<span>取消</span>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../js/common.js"></script>
	<script>
		$(function(){
			$('.date-list1').date_input();
			$(".date-list2").date_input();
			$(".date-input").date_input();
		});
		$('.date-list2').on("click", function() {
			updateT1();
			$('.nav span').on("click", function() {
				if ($(this).parent().parent().parent().prev().attr("class") == "date-list2") {
					updateT1();
				};
			});
		});
		$('.date-list1').on("click", function() {
			updateT2();
			$('.nav span').on("click", function() {
				if ($(this).parent().parent().parent().prev().attr("class") == "date-list1") {
					updateT2();
				};
			});
		});
		$(".atten-box div").on("click", function() {
			$(".atten-box div").removeClass("atten-sel");
			$(this).addClass("atten-sel");
			if ($(this).index() == 0) {
				$(".curlist-con").eq(0).addClass("sel-curl").siblings().removeClass("sel-curl");
			} else if ($(this).index() == 1) {
				$(".curlist-con").eq(1).addClass("sel-curl").siblings().removeClass("sel-curl");
			} else {
				$(".curlist-con").eq(2).addClass("sel-curl").siblings().removeClass("sel-curl");
			}
		})
	</script>
</body>
</html>